<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';

let $router = useRouter();
const dialogVisible = ref(false);
const handleClick1 = () => {
  dialogVisible.value = true;
}
const handleClick2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const handleClick3 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
  })
}
const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]

const goAbout = (path) => {
  $router.push(path)
}

</script>

<template>
  <div class="home-container">
    <div class="mb-4">
      <el-button @click="handleClick1">Default</el-button>
      <el-button type="primary" @click="handleClick2">Primary</el-button>
      <el-button type="success" @click="handleClick3">Success</el-button>
      <el-button type="info" @click="goAbout('/About')">关于页面</el-button>
      <el-button type="warning" @click="goAbout('/Warning')">警告页面</el-button>
      <el-button type="danger" @click="goAbout('/Error')">错误页面</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="750">
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mb-4 {}
</style>
